<!DOCTYPE html>
<html lang="en">

<head>
    <title>Medicine Reminder</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Library CSS JS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
        
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            background-color: #f8fafc;
            font-family: 'Inter', sans-serif;
            color: #334155;
        }

        .navbar {
            background-color: #1e40af;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .navbar-brand {
            font-weight: 600;
        }

        .reminder-container {
            background-color: #fff;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            margin-top: 2rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .reminder-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .reminder-item {
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease;
        }

        .reminder-item:hover {
            background-color: #f8fafc;
        }

        .reminder-time {
            font-weight: 600;
            color: #1e40af;
            min-width: 80px;
        }

        .reminder-medicine {
            color: #475569;
            font-size: 1.1rem;
            margin-left: 1rem;
        }

        .btn-complete {
            background-color: #10b981;
            color: #fff;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }

        .btn-complete:hover {
            background-color: #059669;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .btn-add {
            background-color: #1e40af;
            color: #fff;
            border-radius: 0.5rem;
            padding: 0.75rem 1.5rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .btn-add:hover {
            background-color: #1d4ed8;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .completed {
            background-color: #ecfdf5;
            opacity: 0.7;
        }

        .completed .reminder-time,
        .completed .reminder-medicine {
            text-decoration: line-through;
            color: #94a3b8;
        }

        .completed .btn-complete {
            background-color: #94a3b8;
        }

        .modal-content {
            border-radius: 0.75rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .modal-header {
            background-color: #1e40af;
            color: #fff;
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 0.75rem;
        }

        .footer {
            background-color: #334155;
            color: #e2e8f0;
            padding: 1.5rem 0;
            margin-top: 3rem;
        }

        .progress-container {
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

        .progress-bar {
            background-color: #1e40af;
            transition: width 1s ease-in-out;
        }

        .notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #1e40af;
            color: white;
            padding: 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.5s ease;
            z-index: 100;
        }

        .notification.show {
            transform: translateY(0);
            opacity: 1;
        }
        .navbar {
            background-color: lightskyblue;
            /* 导航栏背景色 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        .navbar-brand {
            display: flex;
            /* 弹性布局，用于水平排列logo和标题 */
            align-items: center;
            /* 垂直居中 */
        }

        .navbar-brand span {
            font-weight: 600;
            /* 标题字体加粗 */
            margin-left: 0.5rem;
            /* 标题与logo间距 */
        }

        .navbar-nav .nav-link {
            /* 继承Bootstrap默认样式，无额外自定义样式 */
        }

        .navbar-nav .nav-link.active {
            /* Bootstrap默认激活状态样式 */
        }

        .btn-outline-success {
            /* 继承Bootstrap按钮样式 */
        }

        footer {
            background-color: #212529;
            /* 深灰色背景（bg-dark类对应Bootstrap默认色） */
            color: white;
            /* 文本颜色 */
            padding: 1rem 0;
            /* 垂直内边距 */
            text-align: center;
            /* 内容居中 */
        }

        footer .container {
            /* 继承Bootstrap容器样式 */
        }

        footer p {
            margin-bottom: 0.5rem;
            /* 版权文本底部间距 */
        }

        footer .mt-2 {
            margin-top: 0.5rem;
            /* 图标区域顶部间距 */
        }

        footer a {
            color: white;
            /* 图标链接颜色 */
            margin: 0 0.5rem;
            /* 图标左右间距 */
            transition: color 0.3s;
            /* 鼠标悬停动画过渡 */
        }

        footer a:hover {
            color: #007bff;
            /* 鼠标悬停时变为蓝色（可自定义） */
        }
    </style>
</head>

<body>

    <!-- 导航栏优化 -->
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: lightskyblue; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="../images/biaoti.png" height="36" alt="Health Bot Logo">
                <span class="ms-2" style="font-weight: 600;">Health Bot</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="../aboutus.html">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../main.html">Health</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../history.html">History</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../delete_user.html">Delete</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../profile.html">Profile</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <a class="btn btn-outline-success" href="../login.html">
                        <i class="fa fa-sign-out mr-1"></i> Logout
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 页面主体 -->
    <div class="container">
        <div class="text-center my-6">
            <h1 class="display-5 fw-bold text-primary">Medicine Reminder</h1>
            <p class="text-muted">Never forget to take your medicine again</p>
        </div>

        <!-- 进度条 -->
        <div class="progress-container">
            <div class="d-flex justify-content-between mb-1">
                <span class="text-sm font-medium">Daily Progress</span>
                <span class="text-sm font-medium" id="progress-text">0%</span>
            </div>
            <div class="progress" style="height: 12px;">
                <div class="progress-bar" role="progressbar" id="progress-bar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>

        <!-- 提醒容器 -->
        <div class="reminder-container">
            <div id="reminders-list">
                <!-- 提醒项将通过JavaScript动态生成 -->
            </div>

            <!-- 添加提醒按钮 -->
            <button class="btn btn-add" data-bs-toggle="modal" data-bs-target="#addReminderModal">
                <i class="fa fa-plus-circle mr-2"></i> Add New Reminder
            </button>
        </div>

        <!-- 通知提示 -->
        <div id="notification" class="notification">
            <div class="d-flex items-center">
                <i class="fa fa-bell-o mr-2"></i>
                <span id="notification-message">Time to take your medicine!</span>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container text-center">
            <p>&copy; 2025 Medicine Reminder App</p>
            <p class="text-sm text-gray-400">Stay healthy, stay on track</p>
        </div>
    </footer>

    <!-- 添加提醒的模态框 -->
    <div class="modal fade" id="addReminderModal" tabindex="-1" aria-labelledby="addReminderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addReminderModalLabel">Add New Medicine Reminder</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addReminderForm">
                        <div class="mb-3">
                            <label for="medicineName" class="form-label">Medicine Name</label>
                            <input type="text" class="form-control" id="medicineName" placeholder="Enter medicine name" required>
                        </div>
                        <div class="mb-3">
                            <label for="dosage" class="form-label">Dosage</label>
                            <input type="text" class="form-control" id="dosage" placeholder="Enter dosage (e.g., 1 tablet)">
                        </div>
                        <div class="mb-3">
                            <label for="time" class="form-label">Time</label>
                            <input type="time" class="form-control" id="time" required>
                        </div>
                        <div class="mb-3">
                            <label for="frequency" class="form-label">Frequency</label>
                            <select class="form-control" id="frequency">
                                <option value="once">Once a day</option>
                                <option value="twice">Twice a day</option>
                                <option value="thrice">Three times a day</option>
                                <option value="custom">Custom</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="notes" class="form-label">Notes (Optional)</label>
                            <textarea class="form-control" id="notes" rows="2" placeholder="Add any additional information"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="saveReminderBtn" class="btn btn-primary">Save Reminder</button>
                </div>
            </div>
        </div>
    </div>

    
    <script>
        // 模拟数据 - 实际应用中应该从本地存储或API获取
        let reminders = [
            { id: 1, time: "08:00", medicine: "Aspirin", dosage: "1 tablet", completed: false },
            { id: 2, time: "12:00", medicine: "Vitamin C", dosage: "1 capsule", completed: false },
            { id: 3, time: "19:00", medicine: "Blood Pressure Pills", dosage: "2 tablets", completed: false }
        ];

        // DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            renderReminders();
            updateProgress();
            setupNotifications();
        });

        // 渲染提醒列表
        function renderReminders() {
            const remindersList = document.getElementById('reminders-list');
            remindersList.innerHTML = '';

            if (reminders.length === 0) {
                remindersList.innerHTML = `
                    <div class="text-center py-6 text-gray-500">
                        <i class="fa fa-calendar-o fa-3x mb-3"></i>
                        <p>No medicine reminders set yet.</p>
                        <p>Click "Add New Reminder" to create your first reminder.</p>
                    </div>
                `;
                return;
            }

            // 按时间排序
            reminders.sort((a, b) => a.time.localeCompare(b.time));

            reminders.forEach(reminder => {
                const reminderItem = document.createElement('div');
                reminderItem.className = `reminder-item ${reminder.completed ? 'completed' : ''}`;
                
                const timeParts = reminder.time.split(':');
                const formattedTime = `${parseInt(timeParts[0]) % 12 || 12}:${timeParts[1]} ${parseInt(timeParts[0]) >= 12 ? 'PM' : 'AM'}`;

                reminderItem.innerHTML = `
                    <div class="d-flex items-center">
                        <span class="reminder-time">${formattedTime}</span>
                        <div>
                            <span class="reminder-medicine">${reminder.medicine}</span>
                            <div class="text-xs text-gray-500">${reminder.dosage}</div>
                        </div>
                    </div>
                    <div class="d-flex space-x-2">
                        <button class="btn btn-complete ${reminder.completed ? 'opacity-50' : ''}" 
                                onclick="toggleComplete(${reminder.id})">
                            <i class="fa fa-check mr-1"></i>
                            ${reminder.completed ? 'Completed' : 'Mark as Done'}
                        </button>
                        <button class="btn btn-outline-danger btn-sm" onclick="deleteReminder(${reminder.id})">
                            <i class="fa fa-trash-o"></i>
                        </button>
                    </div>
                `;

                remindersList.appendChild(reminderItem);
            });
        }

        // 切换提醒完成状态
        function toggleComplete(id) {
            const reminder = reminders.find(r => r.id === id);
            if (reminder) {
                reminder.completed = !reminder.completed;
                renderReminders();
                updateProgress();
                showNotification(reminder.completed ? 
                    `Marked "${reminder.medicine}" as completed` : 
                    `Marked "${reminder.medicine}" as incomplete`);
            }
        }

        // 删除提醒
        function deleteReminder(id) {
            if (confirm('Are you sure you want to delete this reminder?')) {
                const reminderIndex = reminders.findIndex(r => r.id === id);
                if (reminderIndex !== -1) {
                    const deletedReminder = reminders[reminderIndex];
                    reminders.splice(reminderIndex, 1);
                    renderReminders();
                    updateProgress();
                    showNotification(`Deleted reminder: ${deletedReminder.medicine}`);
                }
            }
        }

        // 添加新提醒
        document.getElementById('saveReminderBtn').addEventListener('click', function() {
            const medicineName = document.getElementById('medicineName').value;
            const dosage = document.getElementById('dosage').value;
            const time = document.getElementById('time').value;
            const frequency = document.getElementById('frequency').value;
            const notes = document.getElementById('notes').value;

            if (!medicineName || !time) {
                alert('Please enter medicine name and time');
                return;
            }

            // 创建新提醒对象
            const newReminder = {
                id: Date.now(), // 使用时间戳作为唯一ID
                time: time,
                medicine: medicineName,
                dosage: dosage || 'Default dosage',
                completed: false,
                frequency: frequency,
                notes: notes
            };

            // 添加到提醒列表
            reminders.push(newReminder);

            // 重新渲染列表
            renderReminders();
            updateProgress();

            // 关闭模态框
            document.getElementById('addReminderForm').reset();
            const modal = document.getElementById('addReminderModal');
            const modalInstance = bootstrap.Modal.getInstance(modal);
            modalInstance.hide();

            // 显示通知
            showNotification(`Added new reminder: ${medicineName}`);
        });

        // 更新进度条
        function updateProgress() {
            const totalReminders = reminders.length;
            const completedReminders = reminders.filter(r => r.completed).length;
            const progressPercentage = totalReminders > 0 ? (completedReminders / totalReminders) * 100 : 0;

            const progressBar = document.getElementById('progress-bar');
            const progressText = document.getElementById('progress-text');

            progressBar.style.width = `${progressPercentage}%`;
            progressBar.setAttribute('aria-valuenow', progressPercentage);
            progressText.textContent = `${Math.round(progressPercentage)}%`;
        }

        // 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            const notificationMessage = document.getElementById('notification-message');

            notificationMessage.textContent = message;
            notification.classList.add('show');

            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }

        // 设置通知系统
        function setupNotifications() {
            // 每分钟检查一次是否有需要提醒的药物
            setInterval(checkForReminders, 60000);
            
            // 初始检查
            checkForReminders();
        }

        // 检查是否有需要提醒的药物
        function checkForReminders() {
            const now = new Date();
            const currentHours = now.getHours().toString().padStart(2, '0');
            const currentMinutes = now.getMinutes().toString().padStart(2, '0');
            const currentTime = `${currentHours}:${currentMinutes}`;
            
            // 查找所有需要当前提醒的药物
            const remindersToNotify = reminders.filter(reminder => 
                reminder.time === currentTime && !reminder.completed
            );
            
            remindersToNotify.forEach(reminder => {
                showNotification(`Time to take ${reminder.medicine}!`);
                
                // 为了避免每分钟都提醒，我们可以添加一个临时标志
                // 实际应用中应该使用更完善的通知系统
                reminder._notified = true;
                
                // 5分钟后重置通知标志
                setTimeout(() => {
                    reminder._notified = false;
                }, 300000);
            });
        }
    </script>
</body>

</html>
    